﻿@model IIcon

@inject IIconExplorer IconExplorer

@using Newtonsoft.Json
@using Smartstore.Core.Content.Menus
@using Smartstore.Core.Content.Media.Icons

<script src="~/admin/js/smartstore.iconchooser.js" sm-target-zone="scripts"></script>

<div class="row xs-gutters fa-chooser">
    <div class="col">
        <select class="fa-icon-chooser noskin"
                id="@Html.IdFor(x => x.Icon)"
                name="@Html.NameFor(x => x.Icon)"
                data-explorer-url="@Url.Action("SearchIcons", "Theme", new { area = "admin" })"
                data-icon-cols="2"
                data-placeholder="@T("Common.Unspecified")">
            <option></option>
            @if (Model.Icon.HasValue())
            {
                var selectedIcon = IconExplorer.GetIconByName(Model.Icon);

                var icon = new
                {
                    id = selectedIcon.Name,
                    text = selectedIcon.Name,
                    hasRegularStyle = selectedIcon.HasRegularStyle,
                    isBrandIcon = selectedIcon.IsBrandIcon,
                    styles = selectedIcon.Styles,
                    isCustom = selectedIcon.IsPro
                };

                <option value="@Model.Icon" data-icon='@JsonConvert.SerializeObject(icon)' selected="selected">
                    @Model.Icon
                </option>
            }
        </select>
    </div>

    <div class="col-auto">
        <div class="btn-group btn-group-toggle unselectable" data-toggle="buttons" id="@Html.IdFor(x => x.Style)">
            <label class="btn btn-icon btn-secondary" attr-class='(Model.Style == "fas", "active")' title="Solid">
                <input class="fa-chooser-style" type="radio" name="@Html.NameFor(x => x.Style)" value="fas" attr-checked='(Model.Style == "fas", "checked")' />
                <span class="d-inline-block rounded-circle bg-dark" style="width:14px; height:14px; line-height:14px; vertical-align:-1px"></span>
            </label>
            <label class="btn btn-icon btn-secondary" attr-class='(Model.Style == "far", "active")' title="Regular">
                <input class="fa-chooser-style" type="radio" name="@Html.NameFor(x => x.Style)" value="far" attr-checked='(Model.Style == "far", "checked")' />
                <span class="d-inline-block rounded-circle border border-dark" style="width:14px; height:14px; border-width: 2px !important; vertical-align:-1px"></span>
            </label>
            <label class="btn btn-icon btn-secondary" attr-class='(Model.Style == "fal", "active")' title="Light (Pro only)">
                <input class="fa-chooser-style" type="radio" name="@Html.NameFor(x => x.Style)" value="fal" attr-checked='(Model.Style == "fal", "checked")' />
                <span class="d-inline-block rounded-circle border border-gray" style="width:14px; height:14px; border-width: 1px !important; vertical-align:-1px"></span>
            </label>

            <label class="btn btn-icon btn-secondary" attr-class='(Model.Style == "fad", "active")' title="Duotone (Pro only)">
                <input class="fa-chooser-style" type="radio" name="@Html.NameFor(x => x.Style)" value="fad" attr-checked='(Model.Style == "fad", "checked")' />
                <i class="fas fa-adjust" style="position: absolute; width:14px; height:14px; font-size: 14px"></i>
                <span class="d-inline-block rounded-circle" style="width:14px; height:14px; background-color: rgba(0,0,0, 0.16)"></span>
            </label>
        </div>
    </div>
</div>